New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
404 page - Responsive color scheme #32113
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alex-page
requested review from
huozhi,
ijjk,
shuding and
timneutkens
as code owners
December 4, 2021 07:03
alex-page
changed the title
Responsive color scheme 404 page
404 page - Responsive color scheme
Dec 4, 2021
ijjk
approved these changes
Apr 16, 2022
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR!
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
buildDuration | 15.3s | 15.1s | -122ms |
buildDurationCached | 6.1s | 6.1s | |
nodeModulesSize | 485 MB | 485 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.01 | 2.972 | -0.04 |
/ avg req/sec | 830.55 | 841.08 | +10.53 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.171 | 1.166 | -0.01 |
/error-in-render avg req/sec | 2134.33 | 2144.77 | +10.44 |
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
925.HASH.js gzip | 179 B | 179 B | ✓ |
framework-HASH.js gzip | 42 kB | 42 kB | ✓ |
main-HASH.js gzip | 28.3 kB | 28.4 kB | |
webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
Overall change | 72 kB | 72.1 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.36 kB | 1.36 kB | ✓ |
_error-HASH.js gzip | 192 B | 192 B | ✓ |
amp-HASH.js gzip | 309 B | 309 B | ✓ |
css-HASH.js gzip | 327 B | 327 B | ✓ |
dynamic-HASH.js gzip | 3.04 kB | 3.04 kB | ✓ |
head-HASH.js gzip | 351 B | 351 B | ✓ |
hooks-HASH.js gzip | 920 B | 920 B | ✓ |
image-HASH.js gzip | 5.74 kB | 5.74 kB | ✓ |
index-HASH.js gzip | 263 B | 263 B | ✓ |
link-HASH.js gzip | 2.36 kB | 2.36 kB | ✓ |
routerDirect..HASH.js gzip | 320 B | 320 B | ✓ |
script-HASH.js gzip | 392 B | 392 B | ✓ |
withRouter-HASH.js gzip | 319 B | 319 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 16 kB | 16 kB | ✓ |
Client Build Manifests
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
_buildManifest.js gzip | 461 B | 461 B | ✓ |
Overall change | 461 B | 461 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
index.html gzip | 530 B | 532 B | |
link.html gzip | 544 B | 545 B | |
withRouter.html gzip | 524 B | 526 B | |
Overall change | 1.6 kB | 1.6 kB |
Diffs
Diff for main-HASH.js
@@ -3533,13 +3533,15 @@
null,
/*#__PURE__*/ _react.default.createElement("style", {
dangerouslySetInnerHTML: {
- __html: "body { margin: 0 }"
+ __html:
+ "\n body { margin: 0; color: #000; background: #fff; }\n .next-error-h1 {\n border-right: 1px solid rgba(0, 0, 0, .3);\n }\n @media (prefers-color-scheme: dark) {\n body { color: #fff; background: #000; }\n .next-error-h1 {\n border-right: 1px solid rgba(255, 255, 255, .3);\n }\n }"
}
}),
statusCode
? /*#__PURE__*/ _react.default.createElement(
"h1",
{
+ className: "next-error-h1",
style: styles.h1
},
statusCode
@@ -3578,8 +3580,6 @@
Error.origGetInitialProps = _getInitialProps;
var styles = {
error: {
- color: "#000",
- background: "#fff",
fontFamily:
'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
height: "100vh",
@@ -3598,7 +3598,6 @@
},
h1: {
display: "inline-block",
- borderRight: "1px solid rgba(0, 0, 0,.3)",
margin: 0,
marginRight: "20px",
padding: "10px 23px 10px 0",
Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
Diff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
Default Build with SWC (Increase detected ⚠️ )
General Overall increase ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
buildDuration | 17.8s | 18.1s | |
buildDurationCached | 6s | 6.1s | |
nodeModulesSize | 485 MB | 485 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 3.012 | 3.007 | 0 |
/ avg req/sec | 829.88 | 831.35 | +1.47 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.144 | 1.156 | |
/error-in-render avg req/sec | 2185.2 | 2162.55 |
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
925.HASH.js gzip | 178 B | 178 B | ✓ |
framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
main-HASH.js gzip | 28.7 kB | 28.9 kB | |
webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
Overall change | 72.6 kB | 72.8 kB |
Legacy Client Bundles (polyfills)
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
Overall change | 31 kB | 31 kB | ✓ |
Client Pages
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
_app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
_error-HASH.js gzip | 179 B | 179 B | ✓ |
amp-HASH.js gzip | 313 B | 313 B | ✓ |
css-HASH.js gzip | 325 B | 325 B | ✓ |
dynamic-HASH.js gzip | 3.02 kB | 3.02 kB | ✓ |
head-HASH.js gzip | 351 B | 351 B | ✓ |
hooks-HASH.js gzip | 921 B | 921 B | ✓ |
image-HASH.js gzip | 5.78 kB | 5.78 kB | ✓ |
index-HASH.js gzip | 261 B | 261 B | ✓ |
link-HASH.js gzip | 2.44 kB | 2.44 kB | ✓ |
routerDirect..HASH.js gzip | 322 B | 322 B | ✓ |
script-HASH.js gzip | 393 B | 393 B | ✓ |
withRouter-HASH.js gzip | 317 B | 317 B | ✓ |
85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
Overall change | 16.1 kB | 16.1 kB | ✓ |
Client Build Manifests
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
_buildManifest.js gzip | 457 B | 457 B | ✓ |
Overall change | 457 B | 457 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary | alex-page/next.js canary | Change | |
---|---|---|---|
index.html gzip | 532 B | 532 B | ✓ |
link.html gzip | 545 B | 546 B | |
withRouter.html gzip | 526 B | 527 B | |
Overall change | 1.6 kB | 1.6 kB |
Diffs
Diff for main-HASH.js
@@ -3533,13 +3533,15 @@
null,
/*#__PURE__*/ _react.default.createElement("style", {
dangerouslySetInnerHTML: {
- __html: "body { margin: 0 }"
+ __html:
+ "\n body { margin: 0; color: #000; background: #fff; }\n .next-error-h1 {\n border-right: 1px solid rgba(0, 0, 0, .3);\n }\n @media (prefers-color-scheme: dark) {\n body { color: #fff; background: #000; }\n .next-error-h1 {\n border-right: 1px solid rgba(255, 255, 255, .3);\n }\n }"
}
}),
statusCode
? /*#__PURE__*/ _react.default.createElement(
"h1",
{
+ className: "next-error-h1",
style: styles.h1
},
statusCode
@@ -3578,8 +3580,6 @@
Error.origGetInitialProps = _getInitialProps;
var styles = {
error: {
- color: "#000",
- background: "#fff",
fontFamily:
'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
height: "100vh",
@@ -3598,7 +3598,6 @@
},
h1: {
display: "inline-block",
- borderRight: "1px solid rgba(0, 0, 0,.3)",
margin: 0,
marginRight: "20px",
padding: "10px 23px 10px 0",
Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
Diff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
Diff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-afb4b7219fe8d317.js"
+ src="/_next/static/chunks/main-f7f95d3518feca5a.js"
defer=""
></script>
<script
SukkaW
pushed a commit
to SukkaW/next.js
that referenced
this pull request
Apr 18, 2022
* Responsive color scheme 404 page * correct styles * typo * consistent spacing Co-authored-by: JJ Kasper <jj@jjsweb.site>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Do you ever mess up your
getStaticPaths
function late at night and your whole page goes white with a 404 error? Not only is the pain of breaking yourgetStaticPaths
function real but your eyes also get punished by the beautiful white background of the 404 page.^ it me
This PR enables dark mode on 404 pages if the user has
prefers-color-scheme: dark
set in their operating system. The changes in this PR are:.error
styles<style> body {
that exists in the_error.tsx
file@media (prefers-color-scheme: dark) {}
for the inverse colorsI have one concern with this approach. I have noticed that
styles/globals.css
still apply to thebody
in my application on 404 pages. This could cause conflicts with these styles overriding them. I haven't looked into the specificity or understand the intention of the 404 page styles to know if this is a serious concern.One way to resolve this is to add a
className
to the<div>
wrapping the errors and apply the<style>
to that className instead of thebody
element.I couldn't easily test this change but abstracting it into a code pen seemed to work fine.